<template>
    <div class="insuranceList">
        <div v-show="isShow">
            <h1>保险列表</h1>
            <div class="search">
                <el-input
                    v-model="searchInsuranceInfo.insearchInsuranceValue"
                    placeholder="请输入内容"
                    style="width: 15%"
                ></el-input>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="insearchInsurance(searchInsuranceInfo)"
                    >搜索</el-button
                >
            </div>
            <el-table :data="insuresInfo" style="width: 100%">
                <el-table-column
                    prop="productsName"
                    label="产品名称"
                    width="180"
                >
                </el-table-column>
                <el-table-column prop="payType" label="缴费类型" width="100">
                </el-table-column>
                <el-table-column
                    prop="suitableFor"
                    label="适用人群"
                    width="180"
                >
                </el-table-column>
                <el-table-column prop="renew" label="可否续保" width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.renew">续保</span>
                        <span v-else>不续保</span>
                    </template>
                </el-table-column>
                <el-table-column prop="policy" label="保单形式" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.policy.join(",") }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格" width="100">
                </el-table-column>
                <el-table-column prop="filename" label="图片" width="100">
                    <template slot-scope="scope">
                        <div class="demo-image">
                            <el-image
                                v-if="scope.row.filename"
                                style="width: 30px; height: 30px"
                                :src="
                                    'http://localhost:3000/images/' +
                                    scope.row.filename
                                "
                            >
                            </el-image>
                            <el-image
                                v-else
                                style="width: 30px; height: 30px"
                                :src="'http://localhost:3000/images/default.png'"
                            >
                            </el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="typesId.typesName" label="所属分类">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)"
                            >编辑</el-button
                        >
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row._id)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="block page">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[3, 5, 7]"
                    layout="total, sizes, prev, pager, next,jumper"
                    :total="totals"
                    class="pages"
                >
                </el-pagination>
            </div>
        </div>
        <div v-show="!isShow">
            <div class="updateinsuranceProducts">
                <h1>修改保险产品</h1>
                <el-form ref="form" :model="insuresData" label-width="80px">
                    <el-form-item label="产品名称">
                        <el-input v-model="insuresData.productsName"></el-input>
                    </el-form-item>
                    <el-form-item label="缴费类型">
                        <el-input v-model="insuresData.payType"> </el-input>
                    </el-form-item>
                    <el-form-item label="适用人群">
                        <el-input v-model="insuresData.suitableFor"></el-input>
                    </el-form-item>
                    <el-form-item label="可否续保">
                        <el-radio-group v-model="insuresData.renew">
                            <el-radio :label="true">续保</el-radio>
                            <el-radio :label="false">不续保</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="保单形式">
                        <el-checkbox-group v-model="insuresData.policy">
                            <el-checkbox
                                label="暂保单"
                                name="type"
                            ></el-checkbox>
                            <el-checkbox
                                label="保险单"
                                name="type"
                            ></el-checkbox>
                            <el-checkbox
                                label="保险凭证"
                                name="type"
                            ></el-checkbox>
                            <el-checkbox label="批单" name="type"></el-checkbox>
                            <el-checkbox
                                label="其他书面形式"
                                name="type"
                            ></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="insuresData.price"></el-input>
                    </el-form-item>
                    <el-form-item label="所属分类">
                        <el-select
                            v-model="insuresData.typesId._id"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in types"
                                :key="item._id"
                                :label="item.typesName"
                                :value="item._id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            @click="updateSubmit(insuresData)"
                            >立即修改</el-button
                        >
                        <el-button @click="isShow = !isShow">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let {
    mapState: mapStateTypes,
    mapActions: mapActionsTypes,
} = createNamespacedHelpers("types");
let { mapState, mapActions, mapMutations } = createNamespacedHelpers("insures");
export default {
    mounted() {
        this.getInsuresInfo({ pageSize: 3 });
        this.getTypes();
    },
    data() {
        return {
            insuresData: {
                productsName: "",
                payType: "",
                suitableFor: "",
                renew: "",
                policy: [],
                price: "",
                filename: "",
                typesId: "",
            },
            isShow: true,
            searchInsuranceInfo: {
                type: "productsName",
                insearchInsuranceValue: "",
            },
        };
    },
    computed: {
        ...mapState([
            "insuresInfo",
            "totals",
            "insuresRanderData",
            "pageSize",
            "currentPage",
        ]),
        ...mapStateTypes(["types"]),
    },
    methods: {
        ...mapActions([
            "getInsuresInfo",
            "delInsureOne",
            "getInsuresInfoOne",
            "updateInsureOne",
            "searchInsuresInfo",
        ]),
        ...mapMutations(["setpageSize", "setcurrentPage"]),
        ...mapActionsTypes(["getTypes"]),
        handleEdit(row) {
            this.isShow = false;
            this.insuresData = row;
        },
        async handleDelete(_id) {
            let data = await this.delInsureOne(_id);
            if (data.code) {
                this.$message({
                    showClose: true,
                    message: "删除成功",
                    type: "success",
                });
                if (this.insuresInfo.length % this.pageSize == 1) {
                    this.setcurrentPage(this.currentPage - 1);
                }
                this.getInsuresInfo();
            } else {
                this.$message({
                    showClose: true,
                    message: "删除失败",
                    type: "error",
                });
            }
        },
        async updateSubmit(updateData) {
            let data = await this.updateInsureOne(updateData);
            if (data.code) {
                this.$message({
                    showClose: true,
                    message: "修改成功",
                    type: "success",
                });
                this.isShow = !this.isShow;
                this.getInsuresInfo({ pageSize: 3 });
            } else {
                this.$message({
                    showClose: true,
                    message: "修改失败",
                    type: "error",
                });
            }
        },
        async insearchInsurance(val) {
            let data = await this.searchInsuresInfo(val);
            console.log(data);
            this.searchInsuranceInfo.insearchInsuranceValue = "";
            if (data.result.data.length > 0) {
                this.$message({
                    showClose: true,
                    message: "数据获取成功",
                    type: "success",
                });
            }
        },
        handleSizeChange(val) {
            this.setpageSize(val);
        },
        handleCurrentChange(val) {
            this.setcurrentPage(val);
        },
    },
    watch: {
        pageSize() {
            this.getInsuresInfo();
        },
        currentPage() {
            this.getInsuresInfo();
        },
    },
};
</script>

<style lang='scss' scope>
.insuranceList {
    border: 1px solid rgb(146, 144, 144);
    padding: 20px;
    // width: 96%;
    h1 {
        padding-bottom: 20px;
    }
    .search {
        position: relative;
        margin-bottom: 20px;
        > .el-button {
            position: absolute;
            top: 0px;
            left: 200px;
        }
    }
    .page {
        .el-pagination .el-select .el-input .el-input__inner {
            width: 100px;
        }
    }
}
.updateinsuranceProducts {
    padding: 20px;
    width: 800px;
    border: 1px solid rgb(161, 160, 160);
    > h1 {
        padding-left: 10px;
        padding-bottom: 20px;
    }
}
// .el-input__inner {
//     width: 15%;
// }
</style>